<template>
    <div>
      <!-- tab栏 -->
       <div class="head">
        <image :src="src1" class="headd" resize="cover" @click="back()"></image>
        <text class="head1">设置店铺信息</text>
        <text class="head2" @click="sure()">确定</text>
      </div>
       <div class="shop_operation" v-if="show2">
           <text class="text_shop1" v-for="( index,item ) in list1" :key="item.index"
            v-on:click="toggle()" :btnId="index.id" @click="chooseServe($event,index.id)">{{index.scname}}</text>
       </div>
    </div>
</template>
<style scoped>
    .shop_operation{
        width: 100%;
        height: 293px;
        /*background-color: pink;*/
        justify-content: space-around;
        padding-top: 70px;
        flex-direction: row;
        flex-wrap: wrap;
        padding-left: 12px;
        padding-right: 12px;
        overflow-y: auto;
    }
    .head{
      width: 100%;
      height: 48px;
      padding-top: 12px;
      /*background-color: pink;*/
      box-sizing: border-box;
      line-height: 32px;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      /*margin-top: 17px;*/
      position: fixed;
      top: 0;
      left: 0;
      box-shadow: 1px 1px 1px #ccc;
      background-color: #fff;
      /*position: relative;*/
      z-index: 2; 
    }
    .headd{
      width: 15px;
      height: 20px;
      /*background-color: #33c179;*/
      /*position: fixed;*/
      position: absolute;
      left: 12px;
    }
    .head2{
      position: absolute;
      right: 12px;
      margin-left: 80px;
      font-size: 20px;
      /*color: #000;*/
      font-weight: bold;
    }
    .head1{
      font-size: 20px;
      font-weight: bold;
    }
    .text_shop1{
        height: 33px;
        line-height: 33px;
        border: solid 2px #a0a0a0;
        border-radius: 20px;
        margin-top: 36px;
        margin-left: 18px;
        padding-right: 15px;
        padding-left: 15px;
    }
    .text_shopshop{
        height: 33px;
        line-height: 33px;
        border: solid 2px #a0a0a0;
        border-radius: 20px;
        margin-top: 36px;
        margin-left: 18px;
        padding-right: 15px;
        padding-left: 15px;
        background-color: #33c179;  
    }
    .cchange{
        background: yellow;
    }
    .cchange2{
        background: #fff;
    }
</style>
<script>
    let stream = weex.requireModule('stream');
export default {
    data () {
        return {
          src1: 'http://192.168.2.123:8080/img/index_back.png',
          show2: true,
          list1:[]
        }
    },
    methods: {
        chooseServe(e,index){
            var checkId=[];
            if(e.target.className==="weex-text weex-el text_shop1 cchange"){
                e.target.className="weex-text weex-el text_shop1 cchange2";
            }else if(e.target.className="weex-text weex-el text_shop1 cchange2"){
                e.target.className="weex-text weex-el text_shop1 cchange";
            }else{
                e.target.className="weex-text weex-el text_shop1 cchange";
            }
        },
    	toggle(){
      },
      // 点击返回
      back(){
        this.$router.back(-1);
      },
      // 点击确定
      sure(){

          var nIdArr =[];
          var nTxtArr=[];
          var asd =document.getElementsByClassName("shop_operation")[0];
          var allServeId = asd.children;
          for(var i in allServeId){
              if(allServeId[i].className==="weex-text weex-el text_shop1 cchange"){
                  nIdArr.push(allServeId[i].attributes.btnId.value);
                  nTxtArr.push(allServeId[i].innerHTML);
              }
          }
          // console.log(nIdArr);
          // id循环变成对像
          var nArr=[];
          nIdArr.forEach(function(v,k){
              var a = {
                  "id":v
              };
              nArr.push(a);
          });
          // id对应内容遍历成对象
          var ntArr=[]
          nTxtArr.forEach(function(v,k){
              var a = {
                  "scname":v
              };
              ntArr.push(a);
          });

          const info1 = {
              serveIds: nArr,
          };
          const info2={
              scname:ntArr
          };
          localStorage.setItem('shopServeIds', JSON.stringify(info1));
          localStorage.setItem("shopServes",JSON.stringify(info2));
        this.$router.push('/setShopInfo');
      }
    },
    beforeCreate:function(){
        // 虚拟dom创建前获取经营类别数据
        stream.fetch({
            method: "POST",
            url: "http://1.194.233.171:8081/api/shops/findAllShopsClass ",
            type: "json",
            body: '',
            headers:{
                'Content-Type':'application/json'
            },
            mode:"cors",
        }, (ret) => {
            // console.log(ret.data.data)
            this.list1=ret.data.data
        }, function (response) {
            // console.log(response);
        });
    }
}
</script>